<template>
  <div class="nav">
    <van-nav-bar class="nav" :title="navData.title">
      <template #left></template>

      <template #right>
        <!-- <van-icon name="search" size="18" /> -->

        <img v-if="navData.outLogin" mode="widthFix" src="../styles/imgs/outLogin.png" style="height: 25px; color: #fff" @click="clickLogin" />
        <!-- <van-icon v-if="!navData.notMenu" name="wap-home-o" size="1.6rem" @click="goMenu" /> -->

        <svg
          v-if="!navData.notMenu"
          class="icon"
          height="20"
          p-id="6621"
          t="1666839276496"
          version="1.1"
          viewBox="0 0 1024 1024"
          width="20"
          xmlns="http://www.w3.org/2000/svg"
          @click="onClickMenu"
        >
          <path
            d="M192 160a32 32 0 0 0-32 32v192a32 32 0 0 0 32 32h192a32 32 0 0 0 32-32V192a32 32 0 0 0-32-32H192z m0-64h192a96 96 0 0 1 96 96v192a96 96 0 0 1-96 96H192a96 96 0 0 1-96-96V192a96 96 0 0 1 96-96zM192 608a32 32 0 0 0-32 32v192a32 32 0 0 0 32 32h192a32 32 0 0 0 32-32v-192a32 32 0 0 0-32-32H192z m0-64h192a96 96 0 0 1 96 96v192a96 96 0 0 1-96 96H192a96 96 0 0 1-96-96v-192a96 96 0 0 1 96-96zM640 608a32 32 0 0 0-32 32v192a32 32 0 0 0 32 32h192a32 32 0 0 0 32-32v-192a32 32 0 0 0-32-32h-192z m0-64h192a96 96 0 0 1 96 96v192a96 96 0 0 1-96 96h-192a96 96 0 0 1-96-96v-192a96 96 0 0 1 96-96zM602.272 266.272a32 32 0 0 0 0 45.28l112 112a32 32 0 0 0 45.28 0l112-112a32 32 0 0 0 0-45.28l-112-112a32 32 0 0 0-45.28 0l-112 112z m-45.248-45.248l112-112a96 96 0 0 1 135.776 0l112 112a96 96 0 0 1 0 135.776l-112 112a96 96 0 0 1-135.776 0l-112-112a96 96 0 0 1 0-135.776z"
            fill="#ffffff"
            p-id="6622"
          />
        </svg>
        <!-- <vui-icon
          v-if="!navData.notMenu"
          :class="['grid cols-1']"
          icon="home-line"
          style="min-width: 50px; display: inline-block; font-size: 1rem"
          @click="onClickMenu"
        /> -->
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
  import { defineComponent, toRefs, reactive, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import { useStore } from 'vuex'
  import { NavBar, Icon } from 'vant'
  export default defineComponent({
    name: 'Nav',
    components: {
      [NavBar.name]: NavBar,
      [Icon.name]: Icon,
    },
    setup() {
      // 导航栏数据
      let nav = reactive({})

      const store = useStore()

      const navData = computed(() => store.getters['pdaNav/getnavData'])

      const router = useRouter()
      // 导航栏左侧返回按钮
      function onClickLeft() {
        // router.back()
      }
      // 返回登录
      function clickLogin() {
        store.dispatch('user/logout')
      }
      // 返回菜单
      function goMenu() {
        if (process.env.VUE_APP_BuildProject === 'pda') {
          router.push('/menu')
        }
      }
      return {
        ...toRefs(nav),
        navData,
        onClickLeft,
        clickLogin,
        goMenu,
      }
    },
    methods: {
      onClickMenu() {
        console.log('onClickMenu')
        this.$router.push('/apps')
      },
    },
  })
</script>

<style lang="scss">
  .nav {
    background: var(--btn-comfirm-back);
    .van-nav-bar__content {
      background: #152777;
    }
    .van-nav-bar__title,
    .van-ellipsis {
      color: #fff !important;
    }
    .van-nav-bar__title,
    .van-icon {
      color: var(--font-color);
    }
  }
</style>
